<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="getUser">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    
        <!--列表-->
        <template>
                			<el-table :data="users" highlight-current-row v-loading="loading" style="width: 100%;">
                				<el-table-column type="index" width="60">
                				</el-table-column>
                				<el-table-column prop="username" label="姓名" width="180" sortable>
                				</el-table-column>
                				<el-table-column prop="email" label="email" width="200" sortable>
                				</el-table-column>
                				<!--<el-table-column prop="age" label="年龄" width="100" sortable>
                				</el-table-column>
                				<el-table-column prop="birth" label="生日" width="120" sortable>
                				</el-table-column>-->
                				<el-table-column label="用户组" min-width="180">
                                    <template scope="scope">
                                        <el-tag v-for="item in scope.row.user_group" type="gray"> {{item.name}}</el-tag>
                                    </template>
                				</el-table-column>
                			</el-table>
</template>

	</section>
</template>

<script>
    import {
        getUserList
    } from '../../api/api';
    //import NProgress from 'nprogress'
    export default {
        data() {
            return {
                filters: {
                    name: ''
                },
                loading: false,
                users: []
            }
        },
        computed() {
        },
        methods: {
            
            //获取用户列表
            getUser: function() {
                let para = {
                    name: this.filters.name
                };
                this.loading = true;
                //NProgress.start();
                getUserList(para).then((res) => {
                    console.log(res)
                    this.users = res.data;
                    this.loading = false;
                    //NProgress.done();
                });
            }
        },
        mounted() {
            this.getUser();
        }
    };
</script>

<style scoped>
    
</style>